<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <style>
        .danpin .main .mingxing:nth-of-type(5n+1){border-top: 1px solid orange;margin-right:14px;}
        .danpin .main .mingxing:nth-of-type(5n+2){border-top: 1px solid green;margin-right:14px;}
        .danpin .main .mingxing:nth-of-type(5n+3){border-top: 1px solid blue;margin-right:14px;}
        .danpin .main .mingxing:nth-of-type(5n+4){border-top: 1px solid red;margin-right:14px;}
        .danpin .main .mingxing:nth-of-type(5n+5){border-top: 1px solid teal;}
    </style>
</head>
<body>
    <div class="banner_x center">
        <%--<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
        <a href=""><div class="ad_top fl"></div></a>--%>
        <div class="nav fl" style="background-color: #92B8B1;width: 100%;height: 50px;line-height:20px">
            <ul id="navUl">
                <c:forEach items="${sessionScope.allType}" var="obj" >
                    <li style="line-height: 50px;height: 50px">
                        <input type="hidden" readonly value="${obj.get("typeid")}">
                        <a <%--href="showxiangqing.jsp" target="ifram"--%>>${obj.get("typename")}</a>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <div class="danpin center">
        <div class="main center" style="height: auto" id="spzs">
            <c:forEach items="${sessionScope.bookBytypeid}" var="obj" >
                <div class="mingxing fl dgsp" style="margin-top: 5px">
                    <div class="sub_mingxing"><a <%--href=""--%>><img src="${obj.get("url")}" alt=""></a></div>
                    <div class="pinpai"><a <%--href=""--%>>${obj.get("bookname")}</a></div>
                    <div class="youhui">${obj.get("remark")}</div>
                    <div class="jiage">${obj.get("price")}</div>
                    <input type="hidden" id="bookid" name="bookid" value="${obj.get("bookid")}">
                </div>
            </c:forEach>
            <div class="clear"></div>
        </div>
    </div>

</body>

<script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>

<script>
    layui.use(['carousel','form','jquery'], function(){
        var carousel = layui.carousel
        var form = layui.form;
        var $ = layui.jquery;

        function showbookxq() {
            $("#spzs .dgsp").click(function () {
                //alert($(this).children("input").val()); 取到 点击的这个 div 的 bookid 的值
                $.ajax({
                    type:'post',
                    url:'${pageContext.request.contextPath}/book/showBookByBookid',
                    data:{"bookid":$(this).children("input").val()},
                    //dataType:'json',//预期的后台数据类型
                    success:function (data) {
                        window.location.href='${pageContext.request.contextPath}/showbookxq.jsp';
                    }
                })
            })
        }

        $(function () {
            showbookxq();
        })

        $("#navUl li").click(function () {
            //alert($(this).children("input").val());  //取到 点击的这个 li 的 typeid 的值
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/book/showBookBytypeid',
                data:{"typeid":$(this).children("input").val()},
                dataType:'json',//预期的后台数据类型
                success:function (data) {
                    if (data[0].bookid >0){
                        $("#spzs").html("");
                        for (var i = 0;i<data.length;i++){
                            $("#spzs").append(
                                $("<div class='mingxing fl dgsp' style='margin-top: 5px'>").append(
                                    $("<div class='sub_mingxing'>").append($("<a>").append($("<img src='"+data[i].url+"'>"))),
                                    $("<div class='pinpai'>").append($("<a>"+data[i].bookname+"</a>")),
                                    $("<div class='youhui'>"+data[i].remark+"</div>"),
                                    $("<div class='jiage'>"+data[i].price+"<div>"),
                                    $("<input type='hidden' id='bookid' name='bookid' value='"+data[i].bookid+"'>")
                                )
                            )
                        }
                    }else {
                        $("#spzs").html("");
                    }
                    showbookxq();
                }
            })
        })

    });
</script>
</html>
